<template>
	<view class="container">

		<view class="videoList">

			<view class="video-item" v-for="(item,index) in videoList" :key="index">
				<view class="title f30 c333"  @click.stop="changeShow(index)">{{item.tit}}</view>
				<view class="boxlist" v-show="item.isok">
					<view class="libox" v-for="(val,index) in videoList[index].boxlist" :key="index">
						<view class="name f30 c666">{{val.name}}</view>
						<view class="arrow">
							<image src="../../../static/images/arrow_right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>



		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoList:''
			};
		},
		onLoad() {
			
			this.videoList=[{
				tit: '一、注册和登录',
				boxlist: [{
						name: '2-1 设置店铺基本信息'
					},
					{
						name: '2-1 设置店铺基本信息'
					}]
			},
			{
			tit: '二、新手引导',
			boxlist: []
			}
			],
			this.videoList.map((item,index)=>{
				console.log(index)
				this.videoList[index].isok=false
			})
		},
		methods:{
			changeShow(index) {
				let list=this.videoList
				list[index].isok = !list[index].isok
				this.videoList=list
				this.$set(this.videoList,index,list[index])
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F4F8;
	}

	.videoList {
		margin-top: 30upx;

		.video-item {
			background-color: $white-background;
			margin-bottom: 20upx;

			.title {
				padding: 30upx;
			}

			.boxlist {
				background-color: #F0EDF1;

				.libox {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					height: 85upx;
					line-height: 85upx;
					padding: 0 30upx;
					border-bottom: 1upx #ddd solid;

					&:last-child {
						border-bottom: none;
					}

					.arrow {
						image {
							width: 20upx;
							height: 35upx;
						}
					}
				}
			}
		}

	}
</style>
